<template>
  <div class="relative">
    <img :src="`${baseUrl}imgs/home/create-user/sex-box${active ? '-active' : ''}.png`" class="w-8" alt="">
    <div class="absolute inset-0 flex items-center justify-center text-#9B2C2B" :class="{ '!text-#FBDBB1': active }">
      {{ name }}
    </div>
  </div>
</template>

<script lang='ts' setup>
interface Props {
  name: string
  active: boolean
}

withDefaults(defineProps<Props>(), {
  name: '',
  active: false,
})

const baseUrl = import.meta.env.VITE_PUBLIC_PATH
</script>

<style lang='less' scoped>
</style>
